<template>
	<view class="contain">
		<u-swiper :list="list" showTitle indicator indicatorMode="line" height="150" circular></u-swiper>
		<view class="boxs">
			<view class="box">

				<view class="circle" @click="toUrl(0)">
					<i class="iconfont">&#xe667;</i>
				</view>
				<view class="link" @click="toUrl(0)">
					{{boxs[0].text}}
				</view>
			</view>
			<view class="box">
				<view class="circle" @click="toUrl(1)">
					<i class="iconfont">&#xe670;</i>
				</view>
				<view class="link" @click="toUrl(1)">
					{{boxs[1].text}}
				</view>
			</view>
			<view class="box">
				<view class="circle" @click="toUrl(2)">
					<i class="iconfont">&#xe674;</i>
				</view>
				<view class="link" @click="toUrl(2)">
					{{boxs[2].text}}
				</view>
			</view>
			<view class="box">
				<view class="circle" @click="toUrl(3)">
					<i class="iconfont">&#xe671;</i>
				</view>
				<view class="link" @click="toUrl(3)">
					{{boxs[3].text}}
				</view>
			</view>
		</view>
		<view class="information">
			<view class="title">
				教务资讯
			</view>
			<scroll-view scroll-y="true" class="scroll">
				<view class="item" v-for="(item,index) in infos" @click="toInfo(index)">
					{{ item.title }}
				</view>
			</scroll-view>
		</view>
		<tabBar :value="0"></tabBar>

	</view>
</template>

<script>
	import api from '@/api/index.js'; // 引入api

	import tabBar from '@/pages/tabBar.vue'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				list: [{
						"title": "",
						"url": "https://www.xju.edu.cn/images/20201007.jpg"
					},
					{
						"title": "校史馆全景",
						"url": "https://www.xju.edu.cn/images/111111111111.jpg"
					},
					{
						"title": "博达校区",
						"url": "https://www.xju.edu.cn/images/111.jpg"
					}, {
						"title": "红湖东景",
						"url": "https://www.xju.edu.cn/images/_MG_6808_00000.jpg"
					}
				],
				boxs: [{
					"text": "发布资讯",
					"url": "./editor/editor",
					"icon": "&#xe667;"
				}, {
					"text": "课程管理",
					"url": "./course",
					"icon": "&#xe670;"

				}, {
					"text": "开设新课",
					"url": "./add",
					"icon": "&#xe674;"
				}, {
					"text": "开设选课",
					"url": "./open",
					"icon": "&#xe671;"
				}],
				infos: []
			}
		},
		components: {
			tabBar
		},
		onLoad() {
			uni.hideTabBar()
			this.checkToken()

			let token = uni.getStorageSync("token")
			api.getNoti(token).then(res => {
				if (res.code == 1) {
					this.infos = res.data
				} else {
					this.infos = []
				}
			}).catch(err => {
				console.log(err)
			});
		},
		methods: {
			...mapMutations(['checkToken']),
			toUrl(index) {
				// console.log(index)
				uni.navigateTo({
					url: this.boxs[index].url
				})
			},
			toInfo(index) {
				console.log("toInfo")
				let id = this.infos[index].id
				uni.navigateTo({
					url: `./info?id=${id}`
				})
			}
		}
	}
</script>

<style lang="less">
	.contain {
		.boxs {
			// background-color: #e7e7e7;
			display: flex;
			justify-content: space-around;

			.box {

				@width: calc(680rpx /5);
				width: @width;
				height: calc(@width *1.8);
				margin: 10px 0;

				.circle {
					height: @width;
					line-height: @width;
					text-align: center;
					background-color: #a62618;
					border-radius: 50%;
					color: white;

				}

				.circle:hover {
					// color: #a62618;
					background-color: #9A6E3A;
				}

				.link {
					margin-top: calc(@width *0.2);

					height: calc(@width*0.5);
					line-height: calc(@width*0.5);
					text-align: center;
					width: @width;
					font-size: 25rpx;
					border-radius: 10px;
					background-color: #a62618;
					color: #FFFFFF;
				}

				.link:hover {
					// color: #a62618;
					background-color: #9A6E3A;
				}


			}
		}

		.information {
			@info-height: 43vh;
			height: @info-height;
			// background-color: #3C9CFF;

			.title {
				height: 150rpx;
				// background-color: #4CD964;
				padding-left: 30rpx;
				color: #a62618;
				line-height: 150rpx;
				font-size: 50rpx;
				border-top: #a62618 1rpx solid;
				border-bottom: #a62618 1rpx solid;
			}

			.scroll {
				height: calc(@info-height - 70px);
				width: auto;
				// background-color: #eee;
				// border: 2px black solid;
				// background-color: #a62618;


				.item {
					margin: 0px;
					background-color: white;
					height: 30px;
					font-size: 30rpx;
					line-height: 30px;

					padding: 10px;
					border-bottom: #a62618 1rpx solid;
					// border-bottom: #a62618 2px solid;
				}
			}
		}
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 40px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}
</style>
